<template>
  <div class="divice-main">
    <div class="nav">

    </div>
    <div class="list">
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item :title="item.name"
                            @click="getChang(item.id,index)"
                            v-for="(item,index) in navList"
                            :class="{active: current == index}"
                            :key="item.id" />

        </van-sidebar>
      </div>
      <div class="right" v-if="loading">
        <div class="right-c" v-if="detail">
          <img class="banner"
               :src="detail.currentOne.banner_url"
               alt="">
          <div class="title">
            <div class="title-c">
              <div class="line"></div>
              <div class="name">{{detail.currentOne.name}}</div>
              <div class="line"></div>
            </div>
          </div>
          <div class="list" >
            <div class="item"
                 @click="goCategory(item.id)"
                 v-for="(item,index) in detail.currentOne.subList"
                 :key="index">
              <img :src="item.wap_banner_url"
                   alt="">
              <div class="name">{{item.name}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import diviceApi from "@/netapi/divce/divice.js"
export default {
  name: "DiviveIndex",
  components: {

  },
  data () {
    return {
      active: "",
      navList: [],
      activeKey: 0,
      id: "",
      current: 0,
      loading:false,
      detail: [{
        currentOne: {
          banner_url: ""
        }
      }]
    };
  },
  computed: {

  },
  created () {
    this.getMethos()
  },
  mounted () {


  },
  methods: {
    getMethos () {
      diviceApi.NavAction().then(res => {
        this.navList = res.categoryList;
        this.id = this.navList[0].id
        this.getDetail()
      })
    },
    getDetail () {
      diviceApi.NavList({ id: this.id }).then(res => {
        console.log(res);
        this.detail = res.data;
        this.loading = true
      })
    },
    getChang (val, inde) {
      this.current = inde;
      this.id = val;
      this.getDetail()
    },
    goCategory (val) {
      console.log(val);
      this.$router.push({ name: "HomeCategory", params: { id: val } })
    }
  },
};
</script>

<style scoped lang="scss">
.divice-main {
  width: 100%;
  .nav {
    width: 100%;
    height: 45px;
    border-bottom: 4px solid #ededed;
  }
  .list {
    display: flex;
    justify-content: space-between;

    .left {
      width: 82px;
      font-size: 12px;
      /deep/.van-sidebar-item--select::before {
        height: 60%;
      }
    }
    .right {
      width: calc(100vw - 82px);
      .right-c {
        width: 261px;
        margin: 0 auto;
        .banner {
          width: 261px;
          height: 109px;
          margin-top: 12px;
        }
        .title {
          width: 100%;
          height: 73px;
          text-align: center;
          display: flex;
          .title-c {
            margin: auto;
            display: flex;
            align-items: center;
            .line {
              width: 12px;
              height: 2px;
              background-color: #999999;
            }
            .name {
              margin: 0px 5px;
            }
          }
        }
        .list {
          width: 100%;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          .item {
            width: 72px;
            height: 90px;
            img {
              width: 72px;
              height: 72px;
            }
            .name {
              text-align: center;
            }
          }
        }
        .list::after {
          content: "";
          flex: auto; /* 或者flex: 1 */
        }
      }
    }
    .active {
      font-size: 18px;
      color: rgb(171, 43, 43);
    }
  }
}
</style>
